<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签过滤功能测试</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/ilovefree-migration.css">
    <link rel="stylesheet" href="assets/css/enhanced-layout.css">
    <link rel="stylesheet" href="assets/css/fontawesome-icons.css">
    <style>
        .test-container {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .debug-info {
            background: rgba(3, 150, 255, 0.1);
            border: 1px solid var(--ilovefree-blue);
            padding: 15px;
            border-radius: var(--radius-md);
            margin: 20px 0;
        }
        .card-debug {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1 style="text-align: center; color: var(--text-primary); margin-bottom: 40px;">
            🏷️ 标签过滤功能测试
        </h1>

        <div class="debug-info">
            <h3>🔍 测试说明</h3>
            <p>1. 点击不同的标签，应该只显示对应标签的导航项目</p>
            <p>2. 点击"推荐"标签，应该显示所有47个导航项目</p>
            <p>3. 点击"风景"标签，应该显示31个导航项目</p>
            <p>4. 点击"人物"标签，应该显示26个导航项目</p>
        

        <?php
        require_once 'config/config.php';
        require_once 'includes/database.php';
        $db = new Database();

        // 获取分类2的数据
        $categories = $db->getCategories();
        $category = null;
        foreach ($categories as $cat) {
            if ($cat['id'] == 2) {
                $category = $cat;
                break;
            }
        }

        $navigations = $db->getNavigations(2);
        $tags = $db->getTags(2);
        ?>

        <div class="category-header">
            <div class="category-title">
                <div class="category-icon">
                <h2 class="category-name"><?php echo htmlspecialchars($category['name']); ?></h2>
            
            <div class="tags-container" id="category-2">
                <!-- 推荐标签 -->
                <button class="tag-btn active" data-tag-id="0" data-tag-filter="推荐" onclick="filterByTag('category-2', 0)">
                    推荐
                    <span class="tag-count"><?php echo count($navigations); ?></span>
                </button>

                <?php
                // 过滤掉推荐标签
                $filteredTags = array_filter($tags, function($tag) {
                    return trim($tag['name_cn']) !== '推荐';
                });
                ?>
                <?php foreach ($filteredTags as $tag): ?>
                    <?php
                    // 计算该标签下的导航数量
                    $tagNavCount = 0;
                    foreach ($navigations as $nav) {
                        if (!empty($nav['tag_ids']) && is_array($nav['tag_ids'])) {
                            if (in_array($tag['id'], $nav['tag_ids'])) {
                                $tagNavCount++;
                            }
                        }
                    }
                    ?>
                    <button class="tag-btn" data-tag-id="<?php echo $tag['id']; ?>" data-tag-filter="<?php echo htmlspecialchars($tag['name_cn']); ?>" onclick="filterByTag('category-2', <?php echo $tag['id']; ?>)">
                        <?php echo htmlspecialchars($tag['name_cn']); ?>
                        <span class="tag-count"><?php echo $tagNavCount; ?></span>
                    </button>
                <?php endforeach; ?>
            
        

        <div class="nav-grid" id="nav-grid-2">
            <?php foreach ($navigations as $nav): ?>
                <?php
                // 构建标签过滤器
                $tagFilters = [];
                if (!empty($nav['tag_ids']) && is_array($nav['tag_ids'])) {
                    foreach ($nav['tag_ids'] as $tagId) {
                        foreach ($tags as $tag) {
                            if ($tag['id'] == $tagId) {
                                $tagFilters[] = htmlspecialchars($tag['name_cn']);
                                break;
                            }
                        }
                    }
                    $tagFilters[] = '推荐';
                }
                $tagFiltersString = implode(',', array_unique($tagFilters));
                ?>
                <div class="nav-card" data-tag-filters="<?php echo $tagFiltersString; ?>">
                    <a href="<?php echo htmlspecialchars($nav['url']); ?>" target="_blank">
                        
                            <h4><?php echo htmlspecialchars($nav['name']); ?></h4>
                            <p><?php echo htmlspecialchars($nav['description']); ?></p>
                            <div class="card-debug">标签: <?php echo $tagFiltersString; ?>
                        
                    </a>
                
            <?php endforeach; ?>
        
    

    <script src="assets/js/php-ilovefree-migration.js"></script>
    <script>
        // 覆盖全局函数以适配测试页面
        function filterByTag(categoryId, tagId) {
            console.log('🏷️ 测试标签点击:', categoryId, tagId);
            if (window.phpPickfreeMigration) {
                window.phpPickfreeMigration.filterByTag(categoryId, parseInt(tagId));
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            console.log('🎯 标签过滤测试页面已加载');
            console.log('📊 导航卡片总数:', document.querySelectorAll('.nav-card').length);
        });
    </script>
</body>
</html>